<template>
  <div class="cs-page-container">
    <LineChart :options="chartOptions" style="width:100%;height:400px" />

    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.channels"
        clearable
        filterable
        multiple
        placeholder="渠道"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-select
        v-model="listQuery.bundleId"
        clearable
        placeholder="包名"
      >
        <el-option label="花伴交友app安卓" value="com.vchat.flower" />
        <el-option label="花伴交友app苹果" value="com.vchat.flower.ios" />
        <el-option label="花伴约会app安卓" value="com.date.flower" />
        <el-option label="花伴约会app苹果" value="com.date.flower.ios" />
        <el-option label="成人约会圈app安卓" value="com.chengren.yhq" />
        <el-option label="他趣附近约会app安卓" value="com.funnychat.mask" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="日期">
          <template slot-scope="{ row }">
            <span>{{
              row.date
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="活跃人数">
          <template slot-scope="{ row }">
            <span>{{ row.active || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="当前奖池">
          <template slot-scope="{ row }">
            <span>{{ parseInt(row.currentPool) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="消耗钻石">
          <template slot-scope="{ row }">
            <span>{{ (parseInt(row.consumeBag) || 0)*9 + (parseInt(row.cat) || 0)*99 + (parseInt(row.tree) || 0)*399 + (parseInt(row.frog) || 0)*999 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="福袋">
          <template slot-scope="{ row }">
            <span>{{ row.consumeBag || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="招财猫">
          <template slot-scope="{ row }">
            <span>{{ row.cat || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="发财树">
          <template slot-scope="{ row }">
            <span>{{ row.tree || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="金钱蟾">
          <template slot-scope="{ row }">
            <span>{{ row.frog || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="注入钻石">
          <template slot-scope="{ row }">
            <span>{{ row.inject }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="返奖钻石">
          <template slot-scope="{ row }">
            <span>{{ row.award || 0 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="总参与人数">
          <template slot-scope="{ row }">
            <span>{{ row.totalUser }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import LineChart from '@/components/LineChart'
  import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
  import { xhrLuckGiftList } from '@api/analysis'
  import { parseTime } from '@/utils'

  export default {
    name: 'TabGift',
    components: { TablePagination, LineChart },
    data() {
      return {
        list: [],
        channels: [],
        total: 0,
        listQuery: {
          offset: 0,
          limit: 30,
          startTime: null,
          endTime: null,
          channels: [],
          bundleId: null,
          gender: null
        },
        daterangeValue: '',
        daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
        inventoryList: null,
        inventoryData: [],
        inventoryDate: [],
        activeList: null,
        activeData: [],
        activeDate: [],
        chartOptions: {}
      }
    },
    watch: {
      inventoryList: {
        handler(newVal, oldVal) {
          // alert('新增数据监听')
          if (newVal !== oldVal) {
            this.drawLine()
          }
        },
        deep: true
      }
    },
    created() {
      this.getChannels()
      this.doSearch()
      this.$nextTick(function() {
        this.drawLine()
      })
    },
    methods: {
      getChannels() {
        this.xhrGetChannels().then(resp => {
          this.channels = resp.data
        })
      },
      doSearch() {
        const params = {
          offset: this.listQuery.offset,
          limit: this.listQuery.limit,
          startTime: this.listQuery.startTime,
          endTime: this.listQuery.endTime,
          bundleId: this.listQuery.bundleId,
          channels:
            (this.listQuery.channels && this.listQuery.channels.join(',')) || null
        }
        xhrLuckGiftList(params).then(resp => {
          this.listLoading = false
          this.total = resp.data.count
          this.list = resp.data.list
          this.inventoryList = resp.data.pool
          var inventoryData = []
          var inventoryDate = []
          this.inventoryList.forEach(item => {
            inventoryData.push(item.pool / 10)
            inventoryDate.push(parseTime(item.target_date, '{y}-{m}-{d}'))
          })
          this.inventoryData = inventoryData
          this.inventoryDate = inventoryDate
        })
      },
      drawLine() {
        this.chartOptions = {
          title: {
            text: '福气夺宝趋势'
          },
          legend: {
            data: ['30日奖池存量']
          },
          xAxisData: this.inventoryDate,
          series: [
            {
              name: '30日总量',
              type: 'line',
              data: this.inventoryData
            }
          ]
        }
      }
    }
  }
</script>
